{% load comments_tags %}
{% load myfilters_and_tags %}
{% load User_tags %}
{% load blog_extras %}
{% load staticfiles %}

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--blog自适应样式-->
    <link rel="stylesheet" type="text/css" href="/static/css/responsive.css">
    <!--Font Awesome 图标web link-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <!-- 标题栏logo-->
    <link rel="icon" href="/static/images/logo.ico" type="image/x-icon">
    <!-- 收藏夹logo-->
    <link rel="shortcut icon" href="/static/images/logo.ico" type="image/x-icon">
    <link rel="stylesheet" href="{% static 'css/article_detail.css' %}">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <link rel="stylesheet" href="{% static 'css/iconfont.css' %}">

    {% block csslink %}

    {% endblock %}

    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %} 原标题 {% endblock %}</title>


    {% block css %}

    {% endblock %}

</head>

<body>

{% block header %}
    <header id="mu-header" class="" role="banner">
        <div class="container">
            <nav class="navbar navbar-default mu-navbar">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <!-- Text Logo -->
                        <a class="navbar-brand" href="/">菜根譚</a>
                        <!-- Image Logo -->
                        <!-- <a class="navbar-brand" href="#"><img src="assets/images/logo.png"></a> -->
                    </div>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                        <ul class="nav navbar-nav mu-menu navbar-right">
                            <li><a href="{% url 'blog:index' %}">首页</a></li>
                            <li><a href="{% url 'course:course_list' %}">教程</a></li>
                            {% for category in bigcategory_list %}
                                <li><a href="{% url 'article:bigcategory' category.slug %}">{{ category.name }}</a></li>
                            {% endfor %}

                            <li>
                                {% if user.is_authenticated %}
                                    <a href="{% url 'myaccount:profile' %}" title="{{ user.username }}">
                                        <span class="iconfont">&#xe653;</span>
                                    </a>
                                {% endif %}

                                {% if not user.is_authenticated %}
                                    {#                                <a href="{% url 'login_url' %}" title="登录">#}
                                    <a href="/accounts/login" title="登录">
                                        <span class="iconfont">&#xe653;</span>
                                    </a>
                                {% endif %}
                            <li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </header>
{% endblock %}


{% block banner %}

    <banner class='banner'>
        <div id="mu-featured-slider">
            <div class="header-banner">
            </div>
        </div>
    </banner>


{% endblock %}

<section class="container" id="section">
    <div class="section-content">
        <!--Start 左侧文章--->

        <div class="row">
            <div class=".col-md-12">
                <div class="arcicle-content">
                    {% block content %}
                        要替换的左侧文章
                    {% endblock %}
                </div>
            </div>
        </div>

        <!--End 左侧文章--->


        <!-- 右侧内容--->
        {% block rightbar %}
            <aside class="sider">
                <div class="about-me">
                    {% aboutme %}
                </div>
                <div class="friendly-link">
                    {% article_category %}
                </div>
                <div class="tag-content" id="tag">
                    <!--
                    <div class="search">
                        <div class="input-group">
                                        <span class="input-group-addon" id="sizing-addon2">
                                            <span class="glyphicon glyphicon-search" aria-hidden="true">
                                            </span>
                                        </span>
                            <input type="text" class="form-control" placeholder="Search for tag"
                                   aria-describedby="sizing-addon2" onkeyup="showHint(this.value)">
                        </div>
                    </div>
                    -->
                    <div class=" search-tag">
                        {% show_tags %}
                    </div>
                </div>
                <div class="friendly-link">
                    {% show_frendly %}
                </div>
                <div class="friendly-link">
                    <div class="widget widget-tag-cloud">
                        <span class="iconfont">&#xe7ea; </span>
                        <h4 class="widget-title">订阅</h4>
                        <hr/>
                        <span class="pull-left">
                            <a href="/all/rss/">RSS订阅</a>
                        </span>
                    </div>
                </div>
            </aside>
        {% endblock %}


    </div>

        <!--分页-->
    {% if is_paginated %}
        <div class="PageList">
            <nav aria-label="Page navigation">
                <ul class="pagination pagination-sm">

                    <li class="{% if not page_obj.has_previous %} disabled {% endif %}">
                        <a href="{% if page_obj.has_previous %} ?page={{ page_obj.previous_page_number }} {% endif %}"
                           aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>

                    {% if first %}
                        <li>
                            <a href="?page=1">1</a>
                        </li>
                    {% endif %}
                    {% if left %}
                        {% if left_has_more %}
                            <li>
                                <span>...</span>
                            </li>
                        {% endif %}
                        {% for i in left %}
                            <li>
                                <a href="?page={{ i }}">{{ i }}</a>
                            </li>
                        {% endfor %}
                    {% endif %}
                    <li class="active"><a href="?page={{ page_obj.number }}">{{ page_obj.number }}</a></li>
                    {% if right %}
                        {% for i in right %}
                            <li>
                                <a href="?page={{ i }}">{{ i }}</a>
                            </li>
                        {% endfor %}
                        {% if right_has_more %}
                            <li>
                                <span>...</span>
                            </li>
                        {% endif %}
                    {% endif %}
                    {% if last %}
                        <li>
                            <a href="?page={{ paginator.num_pages }}">{{ paginator.num_pages }}</a>
                        </li>
                    {% endif %}
                    <li class="{% if not page_obj.has_next %} disabled {% endif %}">
                        <a href="{% if page_obj.has_next %} ?page={{ page_obj.next_page_number }} {% endif %}"
                           aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    {% endif %}
</section>

{% block footer %}
    <!--footer-->
    <footer class="footerbg">
        基于Django构建 © 2020
        |
        菜根譚
        |
        <a href="http://www.miitbeian.gov.cn">渝ICP备19057936号</a>
        |
        <a href="/sitemap.xml" title="Sitemap" target="_blank">网站地图</a>
    </footer>

{% endblock %}

<!--返回顶部--->
<div class="fixedTools hidden">
    <a id='backtop' class="fa fa-arrow-up"></a>
</div>


<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{% block js %} {% endblock %}


<script type="text/javascript">


    (function ($) {

        /*———————————————————————————————底部信息栏(需完善)——————————————————————————————————*/
        var viewH = $(window).height(); //浏览器高度
        var viewW = $(window).width(); //浏览器宽度
        var scroH = $(document).scrollTop(); //滚动高度
        var contentH = $(document).height(); //内容高度
        var _bh = $(document.body).height(); //内容body高度

        if (contentH > viewH) {//初始判断
            $('.footerbg').removeClass('fixed');
        } else if (contentH = viewH) {
            $('.footerbg').addClass('fixed');
        }
        if (viewW < 767) {//移动页面
            $('.footerbg').addClass('hidden');
        }
        jQuery(window).resize(function () {//实时
            var viewH = $(window).height(); //浏览器高度
            var contentH = $(document).height(); //内容高度
            if (contentH > viewH) {
                $('.footerbg').removeClass('fixed');
            } else if (contentH = viewH) {
                $('.footerbg').addClass('fixed');
            }

        });
        /*———————————————————————————————浏览器scroll滚动事件——————————————————————————————————*/
        $('.fixedTools').on('click', function () {
            $('body,html').animate({scrollTop: 0}, 300);
        });
        jQuery(window).bind('scroll', function () {
            /*出现导航栏与回到顶部*/
            if ($(window).scrollTop() > 200) {
                $('#mu-header').addClass('mu-fixed-nav');
                $('.fixedTools').removeClass('hidden');
            } else {
                $('#mu-header').removeClass('mu-fixed-nav');
                $('.fixedTools').addClass('hidden');
            }
        });

    })(jQuery);


    /*———————————————————————————————ajax左侧标签查询——————————————————————————————————*/
    function showHint(str) {
        var xmlhttp;
        // 1、创建 XMLHttpRequest 对象
        if (window.XMLHttpRequest) {
            // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        } else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 3、当服务器响应就绪时执行函数
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                STKeywordDict = JSON.parse(xmlhttp.responseText);
                var html = '';
                for (var item in STKeywordDict) {
                    html = html + '<a class="tag-icon label label-default">#' + STKeywordDict[item] + '</a>'
                }
                $('.search-tag').html(html);
            }
        };
        //2、把请求发送到服务器上的文件
        xmlhttp.open("POST", "/ajax/tag/", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send('STKeyword=' + str);
    }
</script>
</body>

</html>